<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <link rel="stylesheet" href="/css/index.css">
  </link>
  <link rel="stylesheet" href="/font_/iconfont.css">
  </link>
  <!-- <script src="/font_/iconfont.js"></script> -->
  <script src="/font_/iconfont.js"></script>
</head>

<body>
  <div class="container" style="max-width:none">
    <div class="row">
      <div class="col-1 left">
        <img src="">
        <!-- 收藏 -->
        <div class="collect box"><span class="iconfont icon-shoucang"></span><span class="list">收藏</span></div>
        <!--  购货-->
        <div class="purchasei box"><span class="iconfont icon-gouwuche"></span><span class="list">购货</span></div>
        <!-- 销货 -->
        <div class="sales box"><span class="iconfont icon-xiaoshoufenxi"></span><span class="list">销货</span></div>
        <!-- 仓库 -->
        <div class="warehouse box position-relative"><span class="iconfont icon-cangku"></span>
          <span class="list">仓库</span>
          <div class="position-absolute top-0   justify-content-around list-1 dropstart">
            <div class="arrows position-absolute dropdown-toggle "></div>
            <ul>
              <span>仓库单据</span>
              <li>调拨单</li>
              <li>盘点</li>
              <li>盘点记录</li>
              <li>序列号盘点</li>
              <li>入库管理</li>
              <li>出库管理</li>
              <li>成本调整单</li>
              <li>组装单</li>
              <li>拆卸单</li>
            </ul>
            <ul>
              <span>仓库报表</span>
              <li>商品库存余额表</li>
              <li>商品收发明细表</li>
              <li>商品收发汇总表</li>
              <li>入库明细表</li>
              <li>出库明细表</li>
              <li>序列号跟踪表</li>
              <li>序列号状态表</li>
              <li>批次保质期清单</li>
              <li>批次跟踪表</li>
            </ul>
          </div>
        </div>
        <!-- 资金 -->
        <div class="capital box"><span class="iconfont icon-zijin"></span><span class="list">资金</span></div>
        <!-- 资料 -->
        <div class="datum box position-relative"><span class="iconfont icon-ziliao"></span><span class="list">资料</span>
          <div class="position-absolute top-0   justify-content-around list-1 dropstart">
            <div class="arrows position-absolute dropdown-toggle "></div>
            <ul>
              <span>基础资料</span>
              <li>客户管理</li>
              <li class="supplieradmin">供应商管理</li>
              <li class="commoditymanagement">商品管理</li>
              <li class="warehouseadd">仓库管理</li>
              <li>职员管理</li>
              <li>账户管理</li>
              <li>品牌</li>
              <li class="add">新增商品</li>
              <li>发货地址管理</li>
            </ul>
            <ul>
              <span>辅助资料 </span>
              <li>客户类别</li>
              <li class="supplieradd">供应商类别</li>
              <li class="commcat">商品类别</li>
              <li>支出类别 </li>
              <li>收入类别</li>
              <li class="measureadd">计量单位</li>
              <li>结算方式</li>
            </ul>
          </div>
        </div>
        <!-- 客户经营 -->
        <div class="client box"><span class="iconfont icon-BIbaobiao"></span><span class="list">客户经营</span></div>
        <!-- 增值服务 -->
        <div class="value-added-services box"><span class="iconfont icon-tubiao_zengzhifuwu"></span><span
            class="list">增值服务</span></div>
        <!-- 设置 -->
        <div class="set box"><span class="iconfont icon-shezhi"></span><span class="list">设置</span>
        </div>
      </div>
      <div class="col right shadow">
        <iframe class="ifram" width="100%" height="100%" src="/admin/commoditymanagement.html"></iframe>
      </div>
    </div>
  </div>
  <script>

    function hove() {
      // $('.box').hover(function(){
      //   $(this).find(".list-1").addClass("d-flex")
      // },function(){
      //   $(this).find(".list-1").removeClass("d-flex");
      // })
      $(".box").mouseenter(function () {
        // $(this).find(".list-1").fadeIn("1000");
        $(this).find(".list-1").addClass("d-flex");
        $(this).addClass("stavc");
        $(this).find(".iconfont").addClass("stavc");
      });
      $(".box").mouseleave(function () {
        $(this).find(".list-1").fadeOut("1000");
        // setTimeout(() => {
          $(this).find(".list-1").removeClass("d-flex");
        // }, 1000);
        $(this).toggleClass("stavc");
        $(this).find(".iconfont").toggleClass("stavc");
      });

      $(".box").find(".list-1").hover(function () {
        $(this).find(".list-1").addClass("d-flex")

      },
        function () {
          $(this).find(".list-1").toggleClass("d-flex")
        });

      $(".box").find(".list-1").find("li").mouseenter(function () {
        $(this).css("color", "#2F95FF");
      });
      $(".box").find(".list-1").find("li").mouseleave(function () {
        $(this).css("color", "rgb(109, 107, 107)");
      });
    }
    // ifram跳转方法
    function sideshop() {
      // 新增商品
      $(".add").click(function(){
        $(".ifram").attr("src","/admin/add.html")
      });
      // 商品类别
      $(".commcat").click(function(){
        $(".ifram").attr("src","/admin/commcat.html")
      });
      // 计量单位
      $(".measureadd").click(function(){
        $(".ifram").attr("src","/admin/measureadd.html")
      });
      // 供应商类别
      $(".supplieradd").click(function(){
        $(".ifram").attr("src","/admin/supplieradd.html")
      });
      // 供应商管理
      $(".supplieradmin").click(function(){
        $(".ifram").attr("src","/admin/supplieradmin.html")
      });
      // 仓库管理
      $(".warehouseadd").click(function(){
        $(".ifram").attr("src","/admin/warehouseadd.html")
      });
      // 商品管理
      $(".commoditymanagement").click(function(){
        $(".ifram").attr("src","/admin/commoditymanagement.html")
      });
    }

    hove()
    sideshop() 
  </script>
  <!-- <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> -->
</body>

</html>